import * as React from 'react'
import { Avatar, List } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import styles from './Welcome.less'
import { api_gitee, EventInfo } from '../../../apis'

const Main = () => {
    const [ events, updateEvents ] = React.useState<EventInfo[]>([])

    React.useEffect(function () {
        api_gitee.events().then(res => {
            updateEvents(res.data?.events)
        })
    }, [])

    /** 修改内容中的链接 */
    const onClickContent: React.MouseEventHandler<HTMLDivElement> = (e) => {
        const target = e.target as HTMLAnchorElement
        if (/^a$/i.test(target.tagName)) {
            const href = target.getAttribute('href')
            if (!/^[-\w]+:\/\//.test(href)) {
                target.href = 'https://gitee.com' + href
            }
        }
    }
    return <div className={styles.main}>
        <h1>welcome to f2e-crx-creator</h1>
        <List dataSource={events} renderItem={(item, i) => {
            return <List.Item key={i}>
                <List.Item.Meta
                    avatar={<Avatar style={{ background: '#ccc' }} src={<UserOutlined/>} />}
                    title={<a href={`https://gitee.com/${item.author.username}`}>{item.author.nickname}</a>}
                    description={<div onClick={onClickContent} onMouseOver={onClickContent} dangerouslySetInnerHTML={{ __html: item.title }}/>}
                />
            </List.Item>
        }}/>
    </div>
}

export default Main